<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单事件修饰符</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div class="box">
        <!-- 
            .lazy 事件修饰符
            现象：由数据改动，边改边显示的数据驱动视图转化成，数据更改完毕，且失去焦点的时候显示；
            原理：将vue底层中的oninput事件转换成onchange事件
         -->
         <input type="text" v-model="msg"><br>
         <input type="text" v-model.lazy="msg1">
         <h1>{{msg}}</h1>
         <h1>{{msg1}}</h1>

         <!-- 
            .number 事件修饰符 
            作用 就是将表单中收集的数据自动转化成number类型
            注意 表单中收集的数据首字母必须是number类型
        -->
        <input type="text" v-model="inp">
        <h1>{{typeof(inp)}}</h1>
        <input type="text" v-model.number="inp1">
        <h1>{{typeof(inp1)}}</h1>

        <!-- 
            .trim去除用户输入的首尾字母空格 
            去除空格 利于数据收集及匹配
        -->
        <input type="text" v-model="str">
        <h1>---{{str}}---</h1>
        <input type="text" v-model.trim="str1">
        <h1>---{{str1}}---</h1>
    </div>
    <script>
        const vm = new Vue({
            el:'.box',
            data:{
                msg:'',
                msg1:'',
                inp:'',
                inp1:'',
                str:'',
                str1:''
            }
        })
    </script>
</body>
</html>